<template>
    <div id="tutorial">
        <el-row :gutter="-5" class="row_1">
            <el-col :span="6" class="col_1">
                <span>维护教程标题：</span>
                <el-input v-model="inputTutorial" placeholder="请输入维护教程标题" clearable style="width: 200px" clearable></el-input>
            </el-col>
            <el-col :span="5" class="col_2">
                <el-button type="primary" @click="searchTutorial">查询</el-button>
            </el-col>
            <!--            <el-col class="col_3">-->
            <el-button type="primary" @click="addTutorial" class="add">添加维护教程</el-button>
            <!--            </el-col>-->
        </el-row>
<!--        表格区域-->
        <el-table
                :data="rurorialData"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="photo"
                    label="封面图片"
                    align="center"
                 >
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="ID"
                    align="center"
                 >
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="标题"
                    align="center"
                 >
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="设备类型"
                    align="center"
                 >
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="添加日期"
                    align="center"
                 >
            </el-table-column>
            <el-table-column label="操作" align="center">

            </el-table-column>
        </el-table>
<!--        分页-->
        <el-pagination
                @size-change="handleSizeEngineer"
                @current-change="handleCurrentEngineer"
                :current-page.sync="queryInfoTutorial.page"
                :page-size="queryInfoTutorial.limit"
                layout="total, prev, pager, next"
                :total="0"
                background>
        </el-pagination>

    </div>
</template>

<script>
    export default {
        name: "tutorial",
        data(){
            return{
                tutorialData:[],
                inputTutorial:'',
                queryInfoTutorial:{
                    type:'',
                    page:1,
                    limit:5,
                    title:'',
                },
                rurorialData:[],
            }
        },
        created() {
            this.getTurorialData();
        },
        methods:{
            async getTurorialData(){
                this.$http.get("/problem",{params:this.queryInfoTutorial})
                    .then(rsp =>{
                        console.log(rsp)
                    })
                    .catch(respond => {
                        console.log(respond.data.result)
                    })
            },
            searchTutorial(){

            },
            addTutorial(){
                this.$router.push('/tutroial_add');
            },
            handleSizeEngineer(newsize){

            },
            handleCurrentEngineer(newnum){

            }

        }

    }
</script>

<style lang="less" scoped>
    .row_1 {
        margin-left: 11px;
        /*background: blue;*/
        border-bottom: 2px solid #cccccc;
        position: relative;
        .col_1 {
            margin: 15px 0 15px 20px;
            span {
                font-size: 13px;
            }
        }
        .col_2 {
            .col_1();
            margin-left: -30px;
            margin-right: 0;
        }
        .add{
            position: absolute;
            right: 20px;
            top: 15px;
        }
    }
    .el-pagination{
        text-align: center;
        margin-top: 10px;
    }
</style>
